import React from 'react';
import { InlineMath } from 'react-katex';
import { Tooltip, Button } from 'antd';
import { CopyOutlined } from '@ant-design/icons';

const LatexFormula = ({ formula }) => {
  const handleCopyClick = () => {
    navigator.clipboard.writeText(formula).then(
      () => {
        console.log('Copying to clipboard was successful!');
      },
      err => {
        console.error('Could not copy text: ', err);
      }
    );
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <InlineMath>{formula}</InlineMath>
      <Tooltip title='复制公式'>
        <Button
          type='link'
          icon={<CopyOutlined />}
          onClick={handleCopyClick}
          style={{ marginLeft: 8 }}
        />
      </Tooltip>
    </div>
  );
};

export default LatexFormula;
